<template>
	<div id="login">
		<a-layout class="layout" style="height: 100vh">
			<a-form
		      ref="loginForm"
		      :model="form"
		      :rules="rules"
		      :label-col="labelCol"
		      :wrapper-col="wrapperCol"
		      class="login-form"  >
		      <h1 style="margin-left: 33%; margin-bottom: 20px">
		        在线点餐系统  
		      </h1>
		      <a-form-item label="用户名" name="username">
		        <a-input v-model:value="form.username" type="text" autocomplete="off" @keyup.enter="login" />
		      </a-form-item>
		      <a-form-item label="密码" name="password">
		        <a-input v-model:value="form.password" type="password" autocomplete="off" @keyup.enter="login" />
		      </a-form-item>
		      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
		        <a-button type="primary" style="width: 45%" :loading="loading" @click="login">
					{{loginBtnText}}
		        </a-button>
		        <a-button style="margin-left: 30px; width: 45%" @click="reset">
					重置
		        </a-button>
		      </a-form-item>
		    </a-form>
		</a-layout>
	</div>
</template>

<script>
import { message } from 'ant-design-vue';
	export default{
		name: "index",
		data () {
		    return {
		      labelCol: { span: 4 },
		      loading:false,
		      loginBtnText:'登录',
		      wrapperCol: { span: 14 },
		      form: {
		        username: '',
		        password: ''
		      },
		      rules: {
		        username: [
		          {
		            required: true,
		            message: '请输入用户名',
		            trigger: 'blur'
		          }
		        ],
		        password: [
		          {
		            required: true,
		            message: '请输入密码',
		            trigger: 'blur'
		          }
		        ]
		      }
		    }
		},
		mounted(){
			this.$store.commit("set_topbar",{
				bool:false
			})
			var user = {
				username: "admin",
				password: "123456"
			};
			
			if(window.sessionStorage){
				const userdata = JSON.parse(sessionStorage.getItem("users")) || [];
				if(userdata.length == 0){
					userdata.push(user);
					sessionStorage.setItem("users",JSON.stringify(userdata));
				}
			}
		},
		methods:{
			login(){
				this.loading = true;
				this.loginBtnText = "正在登录";
				
				setTimeout(() => {
					if(window.sessionStorage){
						const user = JSON.parse(sessionStorage.getItem("users"));
						if(this.form.username == user[0].username && this.form.password == user[0].password){
							message.success("登录成功，跳转至主页")
							this.$store.commit("login_in",{
								islogin: true
							});
							this.$router.push({ name: 'Home' });
							this.$store.commit("set_topbar",{
								bool:true
							})
						}
						else{
							message.destroy();
							message.warning("输入有误，请检查你的账号或密码后重试！");
							this.loading = false;
							this.loginBtnText = "登录";
						}
					}
				},2000);
			},
			reset () {
			      console.log(this.$refs.loginForm.resetFields());
				  message.success("重置成功");
			}
		}
	}
</script>

<style scoped>
.layout {
  background: #fff;
  background-size: 100% 100%;
}
 
.login-form {
  background: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  width: 600px;
  position: relative;
  margin: 0 auto;
  padding: 80px 0 80px 80px;
  top: 50%;
  transform: translateY(-50%);
}
</style>